<template>
    <eui-popup
      ref="popupfrom"
      type="bottom"
      round
      @confirm="onConfirm"
      @close="onClose"
    >
      <view class="title_contant">
          <view class="title">{{title}}</view>
          <view class="btn" @click="onConfirm">
            <image src="@/static/img/btn_pop_close_999_15.png" mode="" />
          </view>
      </view>
      <view class="department-select">
        <textarea class="textarea" placeholder="请输入内容" maxlength="200" v-model="value" name="" id="" cols="30" rows="10"></textarea>
        <view class="text-count">{{value.length}}/200</view>
        <eui-file-picker 
            v-model="filelist"
            fileMediatype="image" 
            mode="grid" 
            :auto-upload="true"
            @select="select" 
            @progress="progress" 
            @success="success" 
            @fail="fail" 
        />
        <view class="btns">
            <view>取消</view>
            <view class="cancel">确定</view>
        </view>
      </view>
      
    </eui-popup>
  </template>
  
  <script>
  export default {
    props: {
      // 标题
      title: {
        type: String,
        default: '选择部门'
      },
    },
  
    data() {
      return {
        value: '',
        filelist:[]
      }
    },
  
    computed: {
    },
    mounted(){
      
    },
    watch: {
      value(newVal) {
        this.currentValue = newVal
      }
    },
  
    methods: {
      open() {
        this.$refs.popupfrom.open()
      },
      
      onClose() {
          this.$refs.popupfrom.close()
      },
        select(data){
            console.log('data',data)
        },
      selectItem(value) {
        this.currentValue = value
      },
      onConfirm() {
        this.$emit('input', this.currentValue)
        this.$emit('confirm', this.currentValue)
        this.onClose()
        this.searchText = ''
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .department-select {
    padding:0 30rpx 20rpx 30rpx;
    height: 500rpx;
    overflow-y: auto;
    background: #fff;
    z-index: 1000000;
    position: relative;
    .text-count{
        height: 34rpx;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: right;
        color: #b2b2b2;
        line-height: 34rpx;
    }
    .btns{
        position: absolute;
        width: calc(100% - 60rpx);
        bottom: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
            width: 330rpx;
            height: 90rpx;
            background: #f5f5f5;
            border-radius: 20rpx;
            line-height: 90rpx;
            text-align: center;
            font-size: 30rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: Medium;
            color: #666666;
        }
        .cancel{
            background: #409eff;
            color: #ffffff;
        }
    }
  }
  .textarea{
    width: 100%;
    height: 186rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: left;
    color: #222222;
    line-height: 40rpx;
  }
  
  .input {
    flex: 1;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    background-color: transparent;
    border: none;
    outline: none;
  }
  .title_contant{
      height: 100rpx;
      border-radius: 24rpx 24rpx 0px 0px;
      display: flex;
      align-items: center;
      position: relative;
      background: #fff;
      padding: 20rpx 20rpx 0 20rpx;
      image{
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          left: 20rpx;
      }
      .title{
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: Medium;
          text-align: center;
          color: #333333;
          line-height: 44rpx;
          margin: auto;
      }
      .btn{
          position: absolute;
          right: 50rpx;
          width: 30rpx;
          height: 30rpx;
          image{
            width: 30rpx;
            height: 30rpx;
          }
      }
  
  }
  </style> 